<template>
  <el-sub-menu v-if="hasChild" :index="props.item.id" >
    <template #title >
      <el-icon >
        <component :is="Icons[props.item.icon]"  />
      </el-icon>
      {{props.item.text}}
    </template>
    <menu-item
        v-for="(child,childIndex) in props.item.children"
        :key="childIndex"
        :item="child"
        :index="`${props.item.id}-${childIndex}`"
    />
  </el-sub-menu>

  <el-menu-item  v-else :index="props.item.id" @click="handClick(item.path)"
    :class="{
      'active': menuItemStatus[item.path]
    }"
    >
    <el-icon >
        <component :is="Icons[props.item.icon]"  />
    </el-icon>
    {{ props.item.text }}
  </el-menu-item>

</template>

<script setup >
import {router} from "../router/index.ts";
import * as Icons from '@element-plus/icons-vue';
import {isEmpty} from "lodash";
import {MENU_ITEM_STATUS} from '@/constant/constant.js'
import {inject} from "vue";

const menuItemStatus = inject(MENU_ITEM_STATUS);
const props = defineProps({
  item:{
    type: Object,
    default: {}
  },
  index: {
    type: String,
    default: ''
  }
});

const hasChild = props.item.children &&  props.item.children.length > 0;

const handClick = (item) => {
  if(isEmpty(item)){
    return;
  }
  for(const key in menuItemStatus){
    menuItemStatus[key] = false;
  }
  menuItemStatus[item] = true;
  router.replace(item + '?date=' + (new Date().getTime()));
}

</script>
<style>
.active {
  background-color: #409EFF; /* 自定义背景色 */
}
</style>
